<template>
	<view class="CDdeal">
		<app-title titleBackground="#8D84FF" ::lefticonSize='0' text="买卖" color="#fff"></app-title>
		<view class="CDdeal_">
			<view class="CDdeal_box">
				<view class="CDdeal_box_tab">
					<view class="CDdeal_box_tab_" @click="tabListFun(index)" v-for="(item,index) in tabList"
						:key="index" :class="tabIndex === index?tabIndex === 1?'show1':'show':'hide'">
						{{item.title}}
					</view>
				</view>
				<view class="deal_box_trend">
					<uni-collapse-item title="趋势图" style="width: 100%;background-color: #fff;">
						<l-echart style="padding: 0 30rpx;" ref="chart"></l-echart>
					</uni-collapse-item>
				</view>

				<view class="CDdeal_box_">
					<view class="CDdeal_box_center">
						<view class="CDdeal_box_left">
							<view class="CDdeal_box_left_quantity">
								<!-- <view class="CDdeal_box_left_quantity_item">
									<view style="width: 160rpx;color: #9AABB9;text-align-last: justify;">总交易量</view>
									：{{res.zong}}
								</view> -->
								<view class="CDdeal_box_left_quantity_item">
									<view style="width: 160rpx;color: #9AABB9;text-align-last: justify;">
										今日可{{tabIndex === 0?'买':'卖'}}量</view>
									：{{res.kemai}}
								</view>
							</view>
							<view class="CDdeal_box_left_item">
								<view style="padding: 0 30rpx 0 10rpx;color: #798DA3;">{{tabIndex === 0?'买入':'卖出'}}数量
								</view>
								<input class="CDdeal_box_left_item_input" v-model="num" v-if="tabIndex === 0"
									type="number" @input="numfun" placeholder="请输入" />

								<input class="CDdeal_box_left_item_input" v-model="num" :disabled="!res.isshru"
									v-if="tabIndex === 1" type="number" @input="numfun" placeholder="请输入" />
							</view>
							<view class="CDdeal_box_left_item">
								<view style="padding: 0 30rpx 0 10rpx;color: #798DA3;">
									{{tabIndex === 0?'消耗优惠券':'可卖券价格'}}
								</view>




								<input v-if="tabIndex === 0" class="CDdeal_box_left_item_input" type="number"
									v-model="num" disabled />

								<input v-if="tabIndex === 1" class="CDdeal_box_left_item_input" type="number"
									v-model="res.now_price" disabled />
							</view>
							<view class="CDdeal_box_left_item">
								<view style="padding: 0 30rpx 0 10rpx;color: #798DA3;">
									{{tabIndex === 0?'优惠券价格':'我的收益'}}
								</view>
								<input class="CDdeal_box_left_item_input" v-model="totalMoney" type="number" disabled />
							</view>

							<view class="CDdeal_box_left_item" @click="dialogToggle()"
								style="border: 5rpx solid #856FFF;color: #fff;background-color: #856FFF;text-align: center;justify-content: center;">
								{{tabIndex === 0?'（赊购）确定':'确认卖出'}}
							</view>

							<view class="CDdeal_box_left_wodeCL" v-if="tabIndex === 0">
								<view class=""
									style="display: flex;align-items: center;justify-content: center;justify-content: space-between;">
									<view style="padding: 0 30rpx 0 10rpx;color: #798DA3;">可买优惠券</view>
									{{res.available_credit}}
								</view>
								<view class=""
									style="display: flex;align-items: center;justify-content: center;justify-content: space-between;">
									<view style="padding: 0 30rpx 0 10rpx;color: #798DA3;">可卖优惠券</view>{{res.user_cd}}
								</view>
							</view>
							<view class="CDdeal_box_left_wodeCL" v-if="tabIndex === 1">
								<view class=""
									style="display: flex;align-items: center;justify-content: center;justify-content: space-between;">
									<view style="padding: 0 30rpx 0 10rpx;color: #798DA3;">优惠券数量</view>{{res.user_cd}}
								</view>
								<view class=""
									style="display: flex;align-items: center;justify-content: center;justify-content: space-between;">
									<view style="padding: 0 30rpx 0 10rpx;color: #798DA3;">我的收益</view>{{res.shouyi}}
								</view>
							</view>


						</view>
						<view class="CDdeal_box_right" v-if="tabIndex === 0">
							<view class="CDdeal_box_right_title">
								<view class="CDdeal_box_right_title_">
									价格(CNY)
								</view>
								<view class="CDdeal_box_right_title_">
									数量(QTY)
								</view>
							</view>
							<view class="CDdeal_box_right_list">
								<scroll-view class="scroll_view" :scroll-top="scrollTop" scroll-y="true"
									@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
									<view class="scroll_view_item" v-for="(item,index) in res.buy_list" :key="index">
										<view class="scroll_view_item_" :style="`color:${item.color}`">{{item.price}}
										</view>
										<view class="scroll_view_item_">{{item.num}}</view>
									</view>
								</scroll-view>
							</view>
						</view>
						<view class="CDdeal_box_right" v-if="tabIndex === 1">
							<view class="CDdeal_box_right_title">
								<view class="CDdeal_box_right_title_">
									天数
								</view>
								<view class="CDdeal_box_right_title_">
									数量
								</view>
								<view class="CDdeal_box_right_title_">
									操作
								</view>
							</view>
							<view class="CDdeal_box_right_list">
								<scroll-view class="scroll_view" :scroll-top="scrollTop" scroll-y="true"
									@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
									<view class="scroll_view_item" v-for="(item,index) in res.new_my_sell" :key="index">
										<view class="scroll_view_item_" :style="`color:${item.color}`">
											T+{{item.day_cha}}
										</view>
										<view class="scroll_view_item_">{{item.num}}</view>
										<view class="scroll_view_item_">
											<!-- {{item.num}} -->
											<view class="scroll_view_item_button" @click="caozuoFun(1,item.num,item.id)"
												:style="`background-color:${item.color}`" v-if="item.day_cha > 4">
												卖出
											</view>
											<view class="scroll_view_item_button" @click="caozuoFun(0)"
												:style="`background-color:${item.color}`" v-if="item.day_cha < 4">
												未到期
											</view>
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="CDdeal_bottom">
				<view class="CDdeal_bottom_title">
					<view class="CDdeal_bottom_title_item" @click="bottomtabFun(index)"
						v-for="(item,index) in bottomtabList" :key="index"
						:style="bottomtabIndex === index?'color:#3C5B72;':'color:#C7CDD3;'">
						{{item}}
						<view :class="bottomtabIndex === index?'show':''"></view>
					</view>
				</view>
				<view class="CDdeal_bottom_box">
					<view class="CDdeal_bottom_box_" style="color: #856FFF;font-size: 38rpx;">
						{{title}}
					</view>
					<view class="CDdeal_bottom_box_" style="color: #BDC5CA;font-size: 30rpx;">
						部分成交
					</view>
				</view>
				<view class="CDdeal_bottom_table">
					<view class="CDdeal_bottom_table_title">
						<view class="table_title">日期</view>
						<view class="table_title">委托总数</view>
						<view class="table_title">已成交数</view>
						<view class="table_title">委托价格</view>
						<view class="table_title">操作</view>
					</view>
					<view class="CDdeal_bottom_table_box" v-if="tabIndex === 0">
						<view class="CDdeal_bottom_table_box_item"
							v-for="(item,index) in bottomtabIndex === 0?res.buy:res.lishibuy" :key="index">
							<view class="CDdeal_bottom_table_box_item_">{{item.createtime.replace(/-/g,'/')}}</view>
							<view class="CDdeal_bottom_table_box_item_">{{item.num}}</view>
							<view class="CDdeal_bottom_table_box_item_">{{item.ynum}}</view>
							<view class="CDdeal_bottom_table_box_item_">{{item.price}}</view>
							<view class="CDdeal_bottom_table_box_item_" style="padding: 5rpx 20rpx;">
								<view class="CDdeal_bottom_table_box_item_button"
									@click="revocationOpen(item.openid,item.id,item.num)">撤销</view>
							</view>
						</view>
					</view>
					<view class="CDdeal_bottom_table_box" v-if="tabIndex === 1">
						<view class="CDdeal_bottom_table_box_item"
							v-for="(item,index) in bottomtabIndex === 0?res.sell:res.lishisell" :key="index">
							<view class="CDdeal_bottom_table_box_item_">{{item.createtime.replace(/-/g,'/')}}</view>
							<view class="CDdeal_bottom_table_box_item_">{{item.num}}</view>
							<view class="CDdeal_bottom_table_box_item_">{{item.ynum}}</view>
							<view class="CDdeal_bottom_table_box_item_">{{item.price}}</view>
							<view class="CDdeal_bottom_table_box_item_" style="padding: 5rpx 20rpx;">
								<view class="CDdeal_bottom_table_box_item_button"
									@click="revocationOpen(item.openid,item.id,item.num)">撤销</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="revocation" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="同意" title="温馨提示" content="确认要撤销吗？"
				@confirm="revocationFun" @close="revocationClose"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="同意" title="温馨提示" :content="`确认要${title}吗？`"
				@confirm="dealFun" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<app-tab :tabIndex='2'></app-tab>
	</view>
</template>

<script>
	import {
		api_index_cangdan_mairu_zong, //买入加载
		api_index_cangdan_buy_zong, //买入
		api_index_cangdan_buy_no_zong, //买入撤销
		api_index_cangdan_maichu_zong, //卖出加载
		api_index_cangdan_sell_zong, //卖出
		api_index_cangdan_sell_no_zong //卖出撤销
	} from '@/api/deal.js';


	import appTitle from "@/components/appTitle.vue";
	import appTab from "@/components/appTab.vue";
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
	export default {
		components: {
			appTitle,
			appTab
		},
		data() {
			return {
				tendency_chart: true,
				res: '',
				echartsIsOpen: true,
				tabIndex: 0,
				sellId: 0,
				tabList: [{
					title: '买入'
				}, {
					title: '卖出'
				}],
				bottomtabIndex: 0,
				bottomtabList: ['当前委托', '历史委托'],
				title: '买入',
				chartData: {},
				num: '',
				scrollTop: 0,
				option: {
					tooltip: {
						trigger: 'axis',
						position: function(point, params, dom, rect, size) {

							return [100, '0'] //返回x、y（横向、纵向）两个点的位置
						},
						formatter: function(params) {
							const chartData = params[0]
							return ` 当时价  ${chartData.value}`
						}
					},

					xAxis: {
						type: 'category',
						data: [],
						axisLabel: {
							show: true, // 显示x轴上的标签
							formatter: function(value) {
								// 在这里可以根据需要返回自定义的提示文字
								// 例如，如果希望在每个标签后面加上"年份"，可以这样返回：
								return value;
							}
						},
						axisLine: {
							show: true, // 关闭x轴上的轴线
						},
						axisTick: {
							show: true, // 关闭x轴上的刻度线
						},
						splitLine: {
							show: true
						},
						animation: true, // 启用动画效果
					},

					yAxis: {
						type: 'value',
						splitLine: {
							show: true
						},
						animation: true, // 启用动画效果
						min: 'dataMin',
						show: true,
						axisLabel: {
							interval: 0,
							rotate: 0,
							fontSize: 8,
						}
					},
					series: [{
						data: [],
						type: 'line',
						animation: true, // 启用动画效果
						lineStyle: {
							color: '#07c087'
						},
						itemStyle: {
							color: '#07c087'
						}
					}]
				},
				totalMoney: '0.00',
				openid: '',
				revocationUp: ''
			};
		},
		onLoad() {

		},

		onShow() {
			uni.hideTabBar()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.tabListFun(this.tabIndex)
					this.echartsIsOpen = true;
					setTimeout(() => {
						this.tendency_chart = false
					}, 1000)
				},
				fail: () => {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			});
		},
		watch: {
			num(r, e) {
				this.totalMoney = r * this.res.now_price;
				console.log(this.totalMoney);
			}
		},
		mounted() {
			this.$refs.chart.init(echarts, chart => {
				chart.setOption(this.option);
			});
			this.$refs.chart.resize({
				width: 375,
				height: 250
			})
		},
		methods: {
			caozuoFun(i, num = '', id = '') {
				console.log(i);
				if (i === 0) {
					this.showinteraction('未到期无法卖出,到期点击自动填充')
				} else {
					this.num = num;
					this.sellId = id;
				}
			},
			//提示
			showinteraction(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000,
					mask: false
				})
			},
			echarts_dta(value) {
				var a = function(value, type) {
					var arr = [];
					for (var i = 0; i < value.length; i++) {
						if (type == 'time') {

							// 获取小时
							var hours = new Date(value[i][type] * 1000).getHours();

							// 获取分钟
							var minutes = new Date(value[i][type] * 1000).getMinutes();

							// var tp = new Date(value[i][type] * 1000).getDate()
							// var month = new Date(value[i][type] * 1000).getMonth() + 1;
							var str = `${hours}:${minutes}`

							arr.push(str);
						} else {
							arr.push(value[i][type])
						}

					}

					return arr;
				};
				var time_arr = a(value, 'time')
				var price_arr = a(value, 'price')

				time_arr.push('')
				time_arr.push('')

				this.option.xAxis.data = time_arr
				this.option.series[0].data = price_arr
				// this.$refs.chart.resize({width: '190%', height: 205})
				this.$refs.chart.init(echarts, chart => {
					chart.setOption(this.option);
				});
			},
			Istendency_chartFun() {
				this.tendency_chart = !this.tendency_chart;
			},
			dialogToggle() {
				this.$refs.alertDialog.open()
			},
			dialogClose() {
				this.$refs.alertDialog.close()
			},
			revocationClose() {
				this.$refs.revocation.close()
			},
			revocationOpen(openid, id, num) {
				this.revocationUp = {
					openid,
					id,
					num
				};
				this.$refs.revocation.open()
			},
			async api_index_cangdan_mairu_zongFun() {
				let data = await api_index_cangdan_mairu_zong(this.openid);
				this.res = data;
				console.log(this.res);
				this.echarts_dta(data.k_line_data);
			},
			async api_index_cangdan_maichu_zongFun() {
				let data = await api_index_cangdan_maichu_zong(this.openid);
				this.res = data;
				console.log(this.res);
				this.echarts_dta(data.k_line_data);
			},



			async dealFun() {
				let up = {
					openid: this.openid,
					num: this.num,
					price: this.res.now_price,
					id: this.sellId !== '' ? this.sellId : '',
				}
				let data = null;
				if (this.tabIndex === 0) {
					data = await api_index_cangdan_buy_zong(up);
				} else {
					data = await api_index_cangdan_sell_zong(up);
				}
				console.log(data);
				if (data.error === 0) {
					this.tabListFun(this.tabIndex);
				}
			},

			async revocationFun() {
				let data = null;
				if (this.tabIndex === 0) {
					data = await api_index_cangdan_buy_no_zong(this.revocationUp);
				} else {
					data = await api_index_cangdan_sell_no_zong(this.revocationUp)
				}
				if (data.error === 0) {
					this.tabListFun(this.tabIndex);
				}
			},
			upper: function(e) {
				console.log('upper')
			},
			lower: function(e) {
				console.log('lower')
			},
			scroll: function(e) {},
			numfun(e) {
				if (e.detail.value.indexOf('.') !== -1) {
					let i = e.detail.value.indexOf('.');
					let arr = e.detail.value.split('');
					arr.splice(i, 1);
					let str = arr.join('');
					this.num = str * 1;
				} else {
					this.num = e.detail.value * 1;
				}
			},
			bottomtabFun(i) {
				this.bottomtabIndex = i;
			},
			tabListFun(i) {
				this.echartsIsOpen = false;
				this.num = '';
				this.tabIndex = i;
				this.title = this.tabList[i].title;
				if (i === 0) {
					this.api_index_cangdan_mairu_zongFun();
				} else {
					this.api_index_cangdan_maichu_zongFun();
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.CDdeal {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.CDdeal_ {
			width: 100%;
			flex: 1;
			overflow-y: auto;
		}

		.placeholder {
			box-sizing: content-box;
			padding-top: var(--status-bar-height);
			height: 100rpx;
		}

		.CDdeal_title {
			width: 100%;
			height: 100rpx;
			position: fixed;
			background-color: #fff;
			display: flex;
			align-items: center;
			// padding: 0 20rpx;
			border-bottom: 2rpx solid #F7F7F7;
			z-index: 200;
			padding-top: var(--status-bar-height);
			box-sizing: content-box;

			.CDdeal_title_ {
				flex: 1;
				display: flex;
				align-items: center;
			}

			.left {
				color: #264963;
				font-weight: 560;
			}
		}

		.CDdeal_box {
			width: 100%;

			.CDdeal_box_tab {
				width: 100%;
				height: 130rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.CDdeal_box_tab_ {
					width: 45%;
					height: 80rpx;
					text-align: center;
					line-height: 75rpx;
					border: 4rpx solid #F6F6F6;
					border-radius: 10rpx;
					color: #fff;
					background-color: #fff;
				}

				.show {
					// border: 4rpx solid #856FFF;
					background-color: #856FFF;
				}

				.show1 {
					background-color: #07C087;
				}

				.hide {
					background-color: #D4DBE2;
				}
			}

			.CDdeal_box_echarts {
				width: 100%;
				padding: 20rpx 20rpx;
				position: relative;

				.CDdeal_box_echarts_title {
					width: 90%;
					height: 80rpx;
					color: #07C087;
					display: flex;
					align-items: center;
					font-size: 30rpx;
					position: absolute;
					top: 0;
					z-index: 10;
				}

				.charts-box {
					width: 100%;
					height: 500rpx;
					position: absolute;
					top: 0;
					right: 0;
				}
			}

			.CDdeal_box_ {
				// margin-top: 100rpx;
				border-bottom: 18rpx solid #F6F5FB;

				.CDdeal_box_center {
					width: 100%;
					height: 660rpx;
					display: flex;
					padding: 0 20rpx;

					.CDdeal_box_left {
						width: 55%;
						height: 100%;

						.CDdeal_box_left_quantity {
							width: 100%;

							.CDdeal_box_left_quantity_item {
								display: flex;
								font-size: 30rpx;
								color: #22445E;
							}
						}

						.CDdeal_box_left_item {
							width: 100%;
							height: 90rpx;
							border: 5rpx solid #F3F3F3;
							margin: 20rpx 0;
							border-radius: 10rpx;
							display: flex;
							align-items: center;
							font-size: 36rpx;

							.CDdeal_box_left_item_input {
								flex: 1;
								text-align: right;
								padding-right: 30rpx;
							}
						}
					}

					.CDdeal_box_right {
						width: 45%;
						height: 96%;
						display: flex;
						padding: 0 20rpx;
						flex-direction: column;
						overflow: hidden;

						.CDdeal_box_right_title {
							width: 100%;
							display: flex;
							font-size: 24rpx;
							color: #9AABB9;
							display: flex;
							justify-content: space-between;
							height: 40rpx;
							line-height: 40rpx;

							.CDdeal_box_right_title_ {
								flex: 1;
								text-align: center;
							}
						}

						.CDdeal_box_right_list {
							width: 100%;
							flex: 1;
							// background-color: #07C087;
							overflow-y: auto;

							.scroll_view {
								width: 100%;
								height: 100%;

								.scroll_view_item {
									width: 100%;
									height: 50rpx;
									line-height: 50rpx;
									text-align: center;
									display: flex;
									justify-content: space-between;

									.scroll_view_item_ {
										flex: 1;
										font-size: 22rpx;
										// padding: 10rpx 0;
										text-align: center;
										display: flex;
										justify-content: center;
										align-items: center;

										.scroll_view_item_button {
											width: 90%;
											height: 30rpx;
											font-size: 20rpx;
											line-height: 30rpx;
											color: #fff;
											border-radius: 10rpx;
										}
									}
								}
							}
						}
					}
				}
			}
		}

		.CDdeal_bottom {
			width: 100%;
			min-height: 500rpx;
			padding: 0 20rpx;

			.CDdeal_bottom_title {
				width: 100%;
				height: 80rpx;
				border-bottom: 1rpx solid #F7F7F7;
				display: flex;
				line-height: 60rpx;

				.CDdeal_bottom_title_item {
					padding: 0 20rpx;
					font-size: 28rpx;

					.show {
						width: 40rpx;
						height: 4rpx;
						background-color: #856FFF;
						margin: 0 auto;
					}
				}
			}

			.CDdeal_bottom_box {
				width: 100%;
				height: 50rpx;
				padding: 0 20rpx;
				margin: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.CDdeal_bottom_table {
				width: 100%;

				.CDdeal_bottom_table_title {
					width: 100%;
					height: 80rpx;
					display: flex;
					align-items: center;

					.table_title {
						width: 20%;
						text-align: center;
						font-size: 28rpx;
						color: #BDC5CA;
					}
				}

				.CDdeal_bottom_table_box {
					width: 100%;

					.CDdeal_bottom_table_box_item {
						width: 100%;
						height: 70rpx;
						display: flex;
						align-items: center;

						.CDdeal_bottom_table_box_item_ {
							width: 20%;
							font-size: 26rpx;
							color: #2B4D66;
							text-align: center;

							.CDdeal_bottom_table_box_item_button {
								background-color: #07C087;
								color: #fff;
								width: 100%;
								height: 40rpx;
								border-radius: 10rpx;
								line-height: 40rpx;
							}
						}
					}
				}
			}
		}
	}
</style>